<template>
	<view class="w-710 ml-20 pb-60">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill"></image>
		<u-navbar title="工作流" :autoBack="false" leftIcon=" " bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>
		<image src="/static/icon_bj1111.png" class="w-710 h-280 mb-20 mt-20" mode="aspectFil"></image>
		<view class="rowsc rowsm">
			<image src="/static/icon_tzuo.png" class="w-16 h-12" mode="aspectFil"></image>
			<view class="fs-32 fw-b ml-12 mr-12" style="color: #0B993C;">工作流</view>
			<image src="/static/icon_tyou.png" class="w-16 h-12" mode="aspectFil"></image>
		</view>
		<view class="rowsl mt-40">
			<view class="list-box">
				<view v-for="(item, index) in workList" :key="index" class="w-150 h-180 rowscl rowsm pl-10 pr-10"
					@click="handleClick(item)">
					<image :src="item.icon" class="w-76 h-76 mb-20" mode="aspectFil"></image>
					<view class="fs-24 col666 tct">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<CustomTabbar currentTab="workflow" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			customNavbarHeight: null,
			workList: [
				{ name: '产品检测任务下发', icon: '/static/icon_17yfs.png', path: '/pages/workbench/01task/02jcrwxf' },
				{ name: '不合格信息上报', icon: '/static/icon_19bhg.png', path: '/subPkg/zzmjsb/bhgxxsb' },
				{ name: '发起电子通知', icon: '/static/icon_3jy.png', path: '/pages/workbench/01task/dianzitongzhi' },
				{ name: '土壤检测任务下发', icon: '/static/icon_13jy.png', path: '/subPkg/trjcbz/trjcrw' },
				{ name: '经济林种植面积上报', icon: '/static/icon_22jg.png', path: '/subPkg/zzmjsb/zzmjsb' },
				{ name: '经济林种植产量上报', icon: '/static/icon_11cj.png', path: '/subPkg/zzmjsb/zzclsb' },
				{ name: '经济林种植产值上报', icon: '/static/icon_20jg.png', path: '/subPkg/zzmjsb/zzczsb' },
				{ name: '创建政策法规', icon: '/static/icon_18hg.png', path: '/subPkg/zzmjsb/cjzcfg' },
				{ name: '创建栽培技术', icon: '/static/icon_24zs.png', path: '/subPkg/zzmjsb/cjzpjs' },
			]
		}
	},
	computed: {
		navbarHeight() {
			// 如果设置了自定义高度，则使用自定义高度
			if (this.customNavbarHeight) {
				return this.customNavbarHeight;
			}
			// 否则自动计算：状态栏高度 + 导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 将px转换为rpx (1px = 2rpx)
			const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
			const navbarHeightRpx = 44 * 2; // 44px = 88rpx
			return statusBarHeightRpx + navbarHeightRpx;
		}
	},
	methods: {
		handleClick(item) {
			const autoOpenNames = ['产品检测任务下发', '发起电子通知', '土壤检测任务下发']
			const needAutoOpen = autoOpenNames.includes(item.name)
			const url = needAutoOpen ? `${item.path}?openAdd=1` : item.path
			uni.navigateTo({ url })
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: 1;
}
.list-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22rpx;
	justify-content: space-between;
}
</style>
